<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-12">
                       
                            <div class="row">
                                <div class="col-lg-6">
                                    <h4>Danh sách đại lý</h4>
                                </div>
                              
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
             <div class="panel-heading">
                 
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-3">
                        
                    </div>
                </div>
                <div class="table-reponsive">
                    <div id="jqxgrid">
                        
                    </div>
                </div>
        </div>
    </div>
</div>
<script type="text/javascript">
  $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'id',type:'int'},
                    { name: 'agent_name', type: 'string' },
                    { name: 'user_id', type: 'string' },
                    { name: 'charges', type: 'float' },
                    { name: 'district_name', type: 'string' },
                    { name: 'province_name', type: 'string' },
                ],
                url:'<?php echo $this->baseUrl() ?>/admin/agent/service',
                sortcolumn: 'charges',
                sortdirection: 'desc'               
            };
         var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                source: dataAdapter,  
                theme: 'bootstrap',
                pageable: true,
                showfilterrow: true,
                filterable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                selectionmode: 'multiplecellsadvanced',
                columnsResize: true,
                rendergridrows: function (params) {
                    return params.data;
                },
                ready: function () {
                    $("#jqxgrid").jqxGrid('hideColumn', 'id');
                },
                columns: [
                  {text:'id',dataField:'id',cellsAlign:'right',width:0},
                  { text: 'Tên đại lý',editable: false, dataField: 'agent_name', width: '50%',
                  cellsrenderer: function (row,value) {
                          // render custom column.
                        editrow = row;
                        var dataRecord = $("#jqxgrid").jqxGrid('getrowdata',editrow); 
                        var str=dataRecord.agent_name.split("||");
                        if(str[2]==1){
                             return "<a style='text-decoration:none; font-size:20; color:red' ><b>"+ str[0]+"</b></a>";
                         } else if(str[2]==2){
                             return "<a style='text-decoration:none; font-size:20; color:blue'><b>"+ str[0]+"</b></a>";
                         } else if(str[2]==3){
                             return "<a style='text-decoration:none; font-size:20; color:black'><b>"+ str[0]+"</b></a>";
                         }  
                   }},                                   
                  { text: 'Quận Huyện',editable: false, dataField: 'district_name', width: '20%' },
                   { text: 'Tỉnh',editable: false, dataField: 'province_name', width: '20%' },
                  { text:'Điểm tích lũy',edittable:false,dataField:'charges',width:'10%'},
                  
                ]
            });
           
        });
    </script>
    
    <form  id="adduserform" onsubmit="return usercheck();" method="POST" >
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;</button>
                    <h4 class="modal-title">
                        <center id="mode_name">    
                            Thêm mới người dùng
                        </center>
                    </h4>
                </div>
                <div class="modal-body">    
                    
                    <div class="form-group">
                        <div class="row">                            
                            <div class="col-lg-4">                            
                                Tên người dùng
                            </div>
                            <div class="col-lg-6">
                                <input class="form-control" type="text" id="username" />
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="row">
                            <div class="col-lg-4">
                                Mật khẩu mới</div>
                            <div class="col-lg-6">
                                <input class="form-control" type="password" id="password" /></div>
                        </div>
                    </div>
                    <div class="form-group">
                    <div class="row">
                        <div class="col-lg-4">
                            Xác nhận mật khẩu</div>
                        <div class="col-lg-6">
                            <input class="form-control" type="password" id="repassword" /></div>
                        <div class="col-lg-2">
                            <span style="color: Red;"></span></div>
                    </div>
                    </div>
                    <div class="form-group">
                    <div class="row">
                        <div class="col-lg-4">                            
                            Họ và tên đệm
                        </div>
                        <div class="col-lg-6">
                            <input class="form-control" type="text" id="user_lastname" name="user_lastname" /></div>
                    </div>
                    </div>
                    <div class="form-group">
                    <div class="row">
                        <div class="col-lg-4">                            
                            Tên
                        </div>
                        <div class="col-lg-6">
                            <input class="form-control" type="text" id="user_firstname" name="user_firstname" /></div>
                    </div>
                    </div>
                    <div class="form-group">
                    <div class="row">
                        <div class="col-lg-4">                            
                            Số điện thoại
                        </div>
                        <div class="col-lg-6">
                            <input class="form-control" type="text" id="user_phone"  /></div>                    
                    </div>
                    </div>
                  
                    <div class="form-group">
                        <div class="row">
                        <div class="col-lg-4">                            
                            Thứ tự
                        </div>
                        <div class="col-lg-6">
                            <input class="form-control" type="text" id="user_order" /></div>
                    </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                        <div class="col-lg-4">                            
                            Hiển thị
                        </div>
                        <div class="col-lg-6">
                            <input type="checkbox" id="user_status"/></div>
                    </div>
                    </div>
                </div>                    
                <div class="modal-footer">    
                    <center>
                        <input type="hidden" id="user_agent_id" />
                        <button id="savechange" class="btn btn-primary" type="submit">
                            Lưu
                        </button>
                        <button type="button" id="close" class="btn btn-primary" data-dismiss="modal">
                            Đóng
                        </button>
                    </center>
                </div>
            </div>
        </div>
    </div>
</form>
    <script type="text/javascript"    >
        $(document).ready(function(){
            $('#user_birthday').datepicker({
                dateFormat: "dd-mm-yy"
            });
        });                
        function userpopup(id)
        {
            $("#user_agent_id").val(id);
            $("#myModal").modal('show');            
        }
        function usercheck()
        {
            if($("#username").val()=="")
            {
                bootbox.alert("Vui lòng nhập tên người dùng!");
                return false;
            }
            if($("#password").val()=="")
            {
                bootbox.alert("Vui lòng nhập mật khẩu!");
                return false;
            }
            if($("#repassword").val()=="")
            {
                bootbox.alert("Vui lòng nhập mật khẩu xác nhận!");
                return false;
            }
            if($("#password").val()!=$("#repassword").val())
            {
                bootbox.alert("Mật khẩu xác nhận không chính xác!");
                return false;
            }
            if($("#user_lastname").val()=="")
            {
                bootbox.alert("Vui lòng nhập họ và tên đệm!");
                return false;
            }
            if($("#user_firstname").val()=="")
            {
                bootbox.alert("Vui lòng nhập tên!");
                return false;
            }
            if($("#user_phone").val()=="")
            {
                bootbox.alert("Vui lòng nhập số điện thoại!");
                return false;
            }

            if($("#user_order").val()=="" || isNaN($("#user_order").val())==true)
            {
                bootbox.alert("Vui lòng nhập số thứ tự!");
                return false;
            }
            var param ={
                username : $("#username").val(),
                password : $("#password").val(),
                firstname : $("#user_firstname").val(),
                lastname : $("#user_lastname").val(),
                phone : $("#user_phone").val(),
                order : $("#user_order").val(),
                status : $("#user_status").val(),
                agent_id: $("#user_agent_id").val(),

            };
            $.post("<?php echo $this->baseUrl().'/admin/agent/adduser/'?>",param,function(data){                  
                $("#myModal").modal('hide');
                document.getElementById("Agent"+$("#user_agent_id").val()).innerHTML = 
                        "<a href='<?php echo $this->baseUrl()?>/admin/user/edit/id/"+data+"'>Chỉnh sửa người dùng</a>";                
               
            });
            event.preventDefault();
        }
        
    </script>
    <script>
  var fileInput = document.getElementById('my_file');  
  var form = document.getElementById('form-upload');

  form.addEventListener('submit', function(evt) {
    // Chan khong cho form tao submit
    evt.preventDefault();

    // Ajax upload
    var file = fileInput.files[0];

    // fd dung de luu gia tri goi len
    var fd = new FormData();
    fd.append('my_file', file);

    // xhr dung de goi data bang ajax
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '<?php echo $this->baseUrl()?>/admin/agent/importagent', true);
    xhr.onload = function() {
      if (this.status == 200) {
        result.innerHTML = this.response;        
      };
    };
    xhr.send(fd);
    xhr.onreadystatechange = function(event) {
        //Kiểm tra điều kiện
        if (xhr.readyState == 4 && xhr.status == 200) {
            try { //Bẫy lỗi JSON
                var server = JSON.parse(xhr.responseText);
                if (server.status==1) {
                    bootbox.alert(server.message);           
                } else {
                    bootbox.alert(server.message);     
                }
            } catch (e) {
               
            }
        }
        
    }
  }, false);
    </script>
    
    <script type="text/javascript">
        function jsdelete(id)
        {
            bootbox.confirm("Xóa Đại lý/Của Hàng sẽ làm mất dữ liệu liên quan đến Đại lý/Cửa Hàng này. Bạn có chắc muốn xoá Đại lý/Cửa Hàng này không?",
                    function(result){
                        if(result == true)
                        {
                           return window.location = "<?php echo $this->baseUrl() ?>/admin/agent/delete/id/"+id;
                        }
                    });
        }
    </script>